<template>
	<div class="app-container">
		<div class="table-container">
			<div class="step-container">
				<el-steps align-center :space="200" :active="omsOrderDetail.orderStatus + 1" finish-status="success">
					<el-step title="提交订单" status="success" :description="omsOrderDetail.createTime | formatCreateTime"></el-step>
					<el-step title="支付订单"></el-step>
					<el-step title="平台发货"></el-step>
					<el-step title="确认收货"></el-step>
				</el-steps>
			</div>
			
			<el-alert
			    title=" 当前订单状态：已取消"
			    type="warning"
			    show-icon
				:closable="false"
				v-if="omsOrderDetail.orderStatus === -1"
				>
			  </el-alert>
			<!-- 收货 -->
			<div class="table-layout">
				<el-row>
					<el-col :span="8" class="table-cell-title">收货人</el-col>
					<el-col :span="8" class="table-cell-title">手机号码</el-col>
					<el-col :span="8" class="table-cell-title">收货地址</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" class="table-cell">{{ omsOrderDetail.userName }}</el-col>
					<el-col :span="8" class="table-cell">{{ omsOrderDetail.userPhone }}</el-col>
					<el-col :span="8" class="table-cell">{{ omsOrderDetail.userAddress }}</el-col>
				</el-row>
			</div>

			<!-- 订单商品 -->
			<el-table
				v-loading="listLoading"
				:data="omsOrderItems"
				element-loading-text="Loading"
				border
				fit
				size="mini"
				stripe
				show-summary
				highlight-current-row
				:row-style="{ height: '40px' }"
				:cell-style="{ padding: '5px 0' }"
			>
				<el-table-column label="商品名称" width="" align="center">
					<template slot-scope="scope">
						{{ scope.row.goodName }}
					</template>
				</el-table-column>
				<el-table-column label="商品主图" width="100" align="center">
					<template slot-scope="scope">
						<el-image style="width: 40px; height: 40px" :src="scope.row.goodImg" :preview-src-list="[scope.row.goodImg]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="商品单价" width="110" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.goodPrice }}</span>
					</template>
				</el-table-column>
				<el-table-column label="数量" width="110" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.goodQuantity }}</span>
					</template>
				</el-table-column>
				<el-table-column label="小计" width="110" align="center" prop="goodPrice">
					<template slot-scope="scope">
						<span>{{ scope.row.goodPrice }}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" class="row-bg" justify="center" v-if="omsOrderDetail.orderStatus == 1" style=" margin-top: 20px;">
				<el-button type="primary" @click="handleDilivery()">发货</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
import { get } from '@/api/order';
import { parseTime } from '@/utils/index';
export default {
	filters: {
		formatCreateTime(time) {
			let date = new Date(time);
			return parseTime(date);
		}
	},
	data() {
		return {
			omsOrderItems: [],
			omsOrderDetail: {},
			listLoading: false
		};
	},
	created() {
		console.log(this.$route.query);
		let orderId = this.$route.query.orderId;
		this.orderId = Number(orderId);
		this.getOrderDetail(Number(orderId));
	},
	methods: {
		handleDilivery(){
			this.popoverVisible = true
			let that = this;
			
			this.$store.dispatch('order/delivery',{
				orderId:this.orderId
			}).then(res=>{
				this.getOrderDetail(this.orderId);
			})
		},
		getOrderDetail(orderId) {
			let that = this;
			this.listLoading = true;
			this.$store.dispatch('order/get', orderId).then(res => {
				console.log(res);
				that.omsOrderItems = res.data.omsOrderDetail.omsOrderItems;
				that.omsOrderDetail = res.data.omsOrderDetail;
				that.listLoading = false;
			});
		}
	}
};
</script>

<style>
	.step-container{
		margin: 0 auto;
	}
.table-container {
	min-width: 600px;
	width: 60%;
	margin: 0 auto;
}
.table-layout {
	margin-top: 20px;
	border-top: 1px solid #dcdfe6;
	border-left: 1px solid #dcdfe6;
}
.table-cell {
	height: 60px;
	line-height: 40px;
	border-right: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
	padding: 10px;
	font-size: 14px;
	color: #606266;
	text-align: center;
	overflow: hidden;
}

.table-cell-title {
	border-right: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
	padding: 10px;
	background: #f2f6fc;
	text-align: center;
	font-size: 14px;
	color: #303133;
}
.el-table {
	margin-top: 20px;
}
</style>
